<template>
  <div class="home">
    <transition name="jumpTop">
      <SearchComponent v-if="callSearch" @changeCallSearch="changeCallSearch" />
    </transition>
    <header class="header">
      <van-icon class="left" name="add" @click.stop="$toast(api.msg)"/>
      <div class="middle">
        <van-icon class="search-icon" name="search" />
        <input
          @click="callSearch = !callSearch"
          type="text"
          placeholder="搜索关键字"
        />
      </div>
      <div class="right">
        <div @click.stop="$toast(api.msg)">
          <svg
            t="1675429886793"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4634"
            width="22"
            height="22"
          >
            <path
              d="M419.037 287.953h413.124c17.673 0 32-14.327 32-32s-14.327-32-32-32H419.037c-17.673 0-32 14.327-32 32s14.327 32 32 32zM419.028 543.17h411.608c17.673 0 32-14.327 32-32s-14.327-32-32-32H419.028c-17.673 0-32 14.327-32 32s14.327 32 32 32zM832.161 735.802H419.037c-17.673 0-32 14.327-32 32s14.327 32 32 32h413.124c17.673 0 32-14.327 32-32s-14.327-32-32-32z"
              fill="#151515"
              p-id="4635"
            ></path>
            <path
              d="M256.037 255.953m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z"
              fill="#151515"
              p-id="4636"
            ></path>
            <path
              d="M256.037 510.787m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z"
              fill="#151515"
              p-id="4637"
            ></path>
            <path
              d="M256.037 767.621m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z"
              fill="#151515"
              p-id="4638"
            ></path>
          </svg>
        </div>
        <div @click.stop="$toast(api.msg)">
          <svg
            t="1675429797786"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3569"
            width="22"
            height="22"
          >
            <path
              d="M192.032 631.402667V404.725333C192.032 228.330667 335.285333 85.333333 512 85.333333s319.968 142.997333 319.968 319.392v226.677334l60.608 121.013333c10.645333 21.237333-4.832 46.218667-28.618667 46.218667H160.042667c-23.786667 0-39.253333-24.981333-28.618667-46.218667l60.608-121.013333z m620.16 103.36l-40.842667-81.536a31.893333 31.893333 0 0 1-3.381333-14.282667V404.725333c0-141.12-114.602667-255.509333-255.968-255.509333S256.032 263.605333 256.032 404.725333V638.933333c0 4.96-1.162667 9.845333-3.381333 14.293334l-40.842667 81.525333h600.384z m-443.306667 152.32a31.893333 31.893333 0 0 1-4.149333-44.981334 32.032 32.032 0 0 1 45.056-4.138666A159.36 159.36 0 0 0 512 874.773333a159.36 159.36 0 0 0 102.186667-36.8 32.032 32.032 0 0 1 45.056 4.138667 31.893333 31.893333 0 0 1-4.16 44.981333A223.402667 223.402667 0 0 1 512 938.666667c-52.981333 0-103.2-18.453333-143.114667-51.594667z"
              fill="#151515"
              p-id="3570"
            ></path>
          </svg>
        </div>
      </div>
    </header>
    <div class="tags">
      <div v-if="tags">
        <div
          :class="{ active: item.id == active }"
          v-for="(item, index) in tags"
          :key="index"
          @click.stop="changeTag(item)"
        >
          {{ item.title }}
        </div>
      </div>
    </div>
    <div class="content">
      <keep-alive>
        <router-view />
      </keep-alive>
    </div>
  </div>
</template>

<script>
import SearchComponent from "@/components/search/SearchComponent.vue";
export default {
  name: "HomeView",
  components: {
    SearchComponent,
  },
  data: () => {
    return {
      init: false,
      callSearch: false,
      tags: null,
      nowTag: {},
      recommended: null,
      active: "recommended",
    };
  },
  methods: {
    changeTag(item) {
      if (this.nowTag.id == item.id) return;
      if(Number.parseInt(item.id)){
        this.$toast("功能开发ing...");
        return;
      }
      this.nowTag = item;
      this.active = this.nowTag.id;
      this.$router.push(`/home/${this.nowTag.id}`);
    },
    changeCallSearch() {
      this.callSearch = false;
    },
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (vm.$route.path !== `/home/${vm.active}`)
        vm.$router.push(`/home/${vm.active}`);
    });
  },
  created() {
    this.axios
      .post(
        `${this.api.baseUrlV2}/app/c`,
        {},
        {
          headers: {
            version: this.api.version,
          },
        }
      )
      .then((res) => {
        this.tags = res.data.result.hometabs.tabs;
        this.nowTag.id = this.$route.name;
        this.active = this.nowTag.id;
      });
  },
};
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  .header {
    position: sticky;
    left: 0;
    top: 0;
    width: 100%;
    height: 0.55rem;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-left: 0.16rem;
    background-color: var(--bgc-white);
    z-index: 1000;
    .left {
      position: relative;
      color: var(--text-icon-yellow);
      font-size: 0.3rem;
      line-height: 0.3rem;
      text-align: center;
      &::after {
        content: "";
        width: 50%;
        height: 50%;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background-color: var(--black);
        z-index: -1;
      }
    }
    .middle {
      position: relative;
      margin-left: 0.1rem;
      width: 2.26rem;
      height: 0.4rem;
      > input {
        background-color: var(--bgc-gray);
        border: none;
        width: 100%;
        height: 100%;
        border-radius: 4px;
        text-indent: 0.3rem;
      }
      .search-icon {
        position: absolute;
        left: 0.1rem;
        top: 0;
        bottom: 0;
        margin: auto 0;
        width: 0.15rem;
        height: 0.15rem;
        font-size: 0.15rem;
        color: var(--text-gray2);
      }
    }
    .right {
      display: flex;
      > div {
        width: 0.21rem;
        height: 0.22rem;
        margin-left: 0.18rem;
      }
    }
  }
  .tags {
    position: sticky;
    left: 0;
    top: 0.55rem;
    z-index: 1000;
    font-size: 0.16rem;
    overflow: scroll;
    width: 100%;
    max-width: 100%;
    background-color: var(--bgc-white);
    &::-webkit-scrollbar {
      display: none;
    }
    > div {
      display: flex;
      color: var(--text-gray3);
      height: 0.45rem;
      width: max-content;
      > div {
        line-height: 0.45rem;
        padding: 0 0.08rem;
        transition: 0.3s;
      }
      .active {
        font-size: 0.24rem;
        color: var(--text-yellow);
        font-weight: bold;
      }
    }
  }
}
</style>
